
*{
    margin:0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}
#headwrap{
    width:100%;
}
#navlogo{
    width:1350px;/* 用百分比会造成右侧DIV 跟随移动 */
    background-color: #fff;
    margin: 0 auto;
 
}
#navlogo::after{
    content: "";
    display: block;
    clear: both;
}
#navlogo .logo{
    background: url("image/logo.png") no-repeat;
    width: 175px; /* 有背景图需要指出div大小 */
    background-size:300px 40px;
    margin-top: 7px;
    margin-left: 25px;
    float: left;
}
#navlogo .logo a{
    display: block;
    height: 45px;
    text-indent: -9999px;
}
#navlogo .server{
    float: right;
    margin-top: 10px;
    margin-right: 30px;
}
#navlogo .server li{
   float:left;
   font-size: 15px;
   font-weight: 600;
   margin-right: 18px;
   padding-top:15px;
}
#navlogo .server li a{
color: #494949;
}
#navlogo .server li a:hover{
   color: red;
}
#contentwrap{
   width: 1366px;
   background: url("image/bgpic.jpg") no-repeat 50% 0;
   position: relative;
  
}
#contentwrap #header{
   margin: 0 auto;
   width: 1200px;
   height: 350px;
 
   position: relative;
}
#header .malpic{
   position: absolute;
 
}
#header .malpic p{
   font-size: 13px;
}
#header .navbar{
   position: absolute;
;
background-position: 0 2px;
   left: 300px;
}
#header ul{
   float: right;
 
}
#header ul li{
   float: left;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   font-family: 'Microsoft Yahei';
   margin-right: 60px;
   margin-top: 25px;
}
#header ul li:last-child{
   margin-right: 0;
}
#header ul i{
    font: 11px "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",arial,tahoma,sans-serif;
    color: #979797;
    line-height: 14px;
    font-style: normal;
    font-variant: small-caps;
    display: block;
    margin-top: -2px;
    text-transform:uppercase;
    font-size: 1px;
    text-align: center;
}
#contentwrap .newslist{
   width: 100%;
   height: 350px;
   position: absolute;
   background: url("image/nav_bg2.png") no-repeat;
   margin-top: -350px;
   transition: 0.5s;
 
}
.newslist li{
   color:#fff;
   font-size: 12px;
   width: 100px;
   text-align: center;
   margin-bottom: 5px;
}

.download{
margin-left: 495px;
margin-top:80px;
float: left;
}
.news{
float: left;
margin-left: 35px;
margin-top:80px;
}
.info{
float: left;
margin-left: 22px;
margin-top:80px;
}
.pay{
float: left;
margin-left: 25px;
margin-top:80px;
}
.interaction{
float: left;
margin-left: 22px;
margin-top:80px;
}
.service{
float: left;
margin-left: 40px;
margin-top:80px;
}
#contentwrap #snews{
margin: 0 auto;
width: 1200px;
height: 310px;
background: url("image/newsbg.png") no-repeat;
}
#snews .newsleft{
   background: url("image/mbtn_bg.png");
   width: 254px;
   height: 335px;
   float: left;
   margin-top: -45px;
   margin-left: 20px;
   position: relative;
   cursor: pointer;
}
.newsleft .down{
   background: url("image/download_bg.png");
   width:213px;
   height: 213px;
   left: 20px;
   position: absolute;
   top: -65px;
}
.newsleft .down div{
   width:213px;
   height: 213px;
   text-indent: -999px;
   background: url("image/download_btn.png");
   transition: 1s;
}
.newsleft .downlist{
   width: 206px;
   height: 188px;
   background: url("image/qlink.png");
   position: absolute;
   top:130px;
   left:20px;
}
.downlist  li{
width: 208px;
height: 32px;
}
.downlist  li img{
   display: none;
}
.downlist  li:hover img{
   display: block;
}
.downlist  li em{
   text-indent: -999px;
   display: block;
}


#newscenter{
   width: 520px;
   height:280px;
  float: left;
  margin-left: 40px;
  margin-top: 10px;
} 

.centertitle ul{
width: 515px;
   height: 28px;
   margin-top: 10px;
   border-bottom: 2px solid #ffd118;
   cursor: pointer;

}
.centertitle li{
float: left;
width: 108px;
background-color: rgb(16,21,31);
margin-right: 8px;
text-align: center;
line-height: 28px;
display: block;
font-size: 14px;
color: #8c9ca9;
font-family: 'Microsoft Yahei';
border-radius: 5px;
}
.centertitle em{
   float: left;
   text-indent: -999px;
   background: url("image/news_more.png") no-repeat;
   width: 20px;
   height: 20px;
   margin-left: 20px;
   margin-top: 3px;
}
.centertitle .lion{
   line-height: 31px;
   width: 105px;
   background: url("image/news-tab_hover.png") no-repeat;
   background-color: rgb(34,43,64);
}
.centerinfo{
   width: 510px;
   height: 240px;
   float: left;
   font-size: 12px;
}
.centerinfo li{
   margin-top: 8px;
   width: 510px;
 
}
.centerinfo span{
color:#ffab00
}
.centerinfo p{
   color: #fc3b3b;
   margin-left: 12px;
   font-weight:bold;
   display: inline;
}
.centerinfo em{
   color: #fff; 
   float: right;
   font-style: normal;
}
.centerinfo .fontcolor1{
   color:#ffd118;
}
.centerinfo .fontcolor2{
   color:#fff;
}
#newsright{
   float: left;
   width: 312px;
   height: 263px;
   margin-top: 20px;
   position: relative;
   cursor: pointer;
   overflow: hidden;
   
}
#newsright ul{
   position: absolute;
   width: 300%;
   transition: 0.8s;
}
#newsright li {
   float: left;
}
#newsright div span{
   position:absolute;
   top:120px;
   width: 30px;
   height: 30px;
   display:block;
   line-height: 30px;
   color: #fff;
   font-size: 20px;
   text-align: center;
   background:rgba(0,0,0,.3);
   border-radius: 50%;
   display: none;
} 
#newsright div span:hover{
background:rgba(0,0,0,.6);
}
#newsright div .rightspan{
   right: 0;
}
#newsright:hover span{
    display: block;
}
#shoplist{
margin-left:83px;
width: 1160px;

}
#shoplist::after{
    content: "";
    display: block;
    clear: both;
}
#shoplist .shopleft{
    float: left;
}

.shopleft .slone{
position: relative;
width: 258px;
height:216px;
border: 1px rgba(0,0,0,.3) solid;
border-radius: 6px;
}
.shopleft .slonepic{
    position: absolute;
}
.shopleft .slonese{
    position: absolute;
    left:35px;
    bottom: 10px;
}
.shopleft .slonese select{
    width: 180px;
    height: 25px;
    color: #666;
    border: solid 1px #e2e2e2;
    line-height: 25px;
}
.sltwo{
    width: 258px;
    height: 380px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 6px;
    margin-top: 20px;
}
.sltwo h3{
    background: url("image/gameService-hd.jpg") no-repeat;
    height: 41px;
    text-indent: -999px;
    border-bottom: dotted 1px #c9c9c9;
    padding: 8px 0;
    margin: 10px;
}
.sltwo p{
    font-size: 12px;
    line-height: 22px;
     color: #696969;
     padding: 0px 0 7px 32px;
}
.sltwo ul{
    margin-left: 22px;
}
.sltwo li{
    width: 211px;
    height: 25px;
    margin-bottom:8px;
    border: 1px red solid;

}
.sltwo .q1{
    background: url("image/gameServicelink.png");
}
.sltwo .q2{
    background: url("image/gameServicelink.png") 0 -33px;
}
.sltwo .q3{
    background: url("image/gameServicelink.png") 0 -66px;
}
.sltwo .q4{
    background: url("image/gameServicelink.png") 0 -132px;
}
.sltwo em{
    display: block;
    text-indent:-9999px;
}
.sltwo .q1:hover {
    background: url("image/gameServicelink1_hover.png");
}
.sltwo .q2:hover {
    background: url("image/gameServicelink2_hover.png");
}
.sltwo .q3:hover {
    background: url("image/gameServicelink3_hover.png");
}
.sltwo .q4:hover {
    background: url("image/gameServicelink4_hover.png");
}
.slthree{
    width:256px;
    height: 222px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 9px;
    margin-top: 20px;
    position: relative;
}
.slthree div  li{
    width: 128px;
    height: 48px;
    float: left;
    line-height: 48px;
    text-align: center;
    font-size: 12px;
    color: #a4a4a4; 
    cursor: pointer;
}
.wwclick{
    color:#fff;
    background: url("image/weixin-hd.png") no-repeat ;
}
.wwclick1{
    color:#fff;
    background: url("image/weixin-hd.png") no-repeat 0px -51px;
}  
.wwclick::after{
    display:block;
    content: "";
    clear: both;
}
.wwclick1::after{
    display:block;
    content: "";
    clear: both;
}
.wwpic li{
    position: absolute;
    top: 50px;
    left: 48px;
    opacity: 0;
    transition: 0.5s;
}
.wwpic li:first-child{
    opacity: 1;
}
.shopcenter{
    float: left;
    margin-left: 20px;
}
.shopcenter .scone{
    width: 615px;
    height: 215px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 9px;
    background: url("image/shopping_bg.png") no-repeat;
    position: relative;
   
}
.scone::after{
display: block;
clear: both;
content: "";
}
.scone>img{
float:right;
margin-right: 55px;
margin-top: 7px;
cursor: pointer;
}

.scone span
{
width: 28px;
height: 28px;
position: absolute;
text-indent: -9999px;
cursor: pointer;
}
.spannleft{
background: url("image/arrow2.png") no-repeat;
top:90px;
left:5px;
}
.spanright{
background: url("image/arrow2.png") no-repeat -28px  0;
top:90px;
right:5px;
}
.scone .ulwrap{
width: 540px;
height: 165px;
position: absolute;
top: 48px;
left: 44px;
cursor: pointer;
overflow: hidden;

}
.scone ul{
width:2704px;
transition: 0.8s; 
/*   border: 1px red solid; */

}
.scone ul li{
float: left;
width: 110px;
height: 165px;
margin-right: 28px;
background: url("image/pic1_bg.png") no-repeat 
}
.scone ul li:last-child{
margin-right:0;
}
.scone ul li img{
margin-top: 12px;
margin-left: 5px;
}
.ulwrap div{
background:url("image/pic1-item1.png") no-repeat 5px 5px;
}
.ulwrap div p{
color: #000;
font-size: 12px;
line-height: 20px;
margin-top: 12px;
padding-left: 20px;
white-space: nowrap;
background:url("image/pic1-item2.png") no-repeat 5px 24px;
}
.scthree{
width: 612px;
position: relative;
top: 20px;
overflow: hidden;
}
.scthree:hover span{
display: block;
}
.scthree span{
width: 40px;
height: 40px;
background-color: rgba(0,0,0,.3);
color: #fff;
line-height: 35px;
text-align: center;
position: absolute;
top: 55px;
border-radius: 50%;
font-size: 24px;
display: none;
cursor: pointer;
}
.scthree span:hover{
background-color: rgba(0,0,0,.6);
}
.scthree .scthreeleft{
left: 10px;
}

.scthree .scthreeright{
right: 10px;
}
.scthree ul{
width: 2448px;
transition: 0.8s;

}
.scthree ul li{
float: left;
}
.scfour{
width: 613px;
height: 213px;
margin-top:38px;
border: 1px rgba(0,0,0,.3) solid;
border-radius: 9px;
background: url("image/playWorld_bg.png") no-repeat;

}
.scfour ul{
width: 565px;
margin:auto;
margin-top:45px;
}
.scfour ul span{
color:#fc3b3b;
}
.scfour ul li{
color: #646464;
font-size: 12px;
margin-bottom: 5px;
font-style: normal;
}
.scfour ul li p{
display: inline;
margin-left: 5px;
font-weight: 600px;
}
.scfour ul li em{
float:right;
}
.scfive{
width: 613px;
height: 220px;
background: url("image/media_bg.png") no-repeat;
margin-top: 20px;
border: 1px rgba(0,0,0,.3) solid;
border-radius: 9px;

}
.scfive span{
width: 30px;
height: 30px;
background-color: rgba(0,0,0,.3);
font-size: 18px;
text-align: center;
line-height: 30px;
border-radius: 50%;
margin-top: 100px;
float: left;
color:#e2e2e2;
cursor: pointer;
}
.scfive span::selection{
background: none;
}
.scfive div{
margin: 0 auto;
margin-top:40px;
width: 530px;
overflow: hidden;
cursor: pointer;
}
.scfive ul{
width: 1060px;
}
.scfive ul li{
float: left;
}
#shopright{
float: right;

}
#shopright .srone{
width: 256px;
cursor: pointer;
}
.srone li{
 position: relative;
width: 256px;
margin-bottom: 20px;
height: 94px;
}
.srone .one{
background: url("image/rlink.png") no-repeat;
}
.srone li:hover em{
position: absolute;
top:16px;
right: 2px;
width:76px;
height: 76px;
transition: 1s;
background: url("image/rlink_hover.png") no-repeat;
}

.srone .two{
background: url("image/rlink.png") no-repeat 0 -94px;

}
.srone .three{
background: url("image/rlink.png") no-repeat 0 -188px;

}
.srtwo{
position: relative;
width: 254px;
height: 280px;
background: url("image/master_bg.png") no-repeat;
}
.srtwo ul{
position: absolute;
top:45px;
left:20px;
}
.srtwo ul img{
width:212px;
height: 125px;
margin-top: 2px;
margin-left: 2px;

}
.srtwo li{
position: relative;
width: 216px;
height: 130px;
background: url("image/master-pic-bg.png")
}
.srtwo p{
padding: 3px 0;
color: #000;
line-height: 20px;
font-size: 12px;
padding-left: 45px;
background: url("image/master-icon.png") no-repeat 28px 8px;
}
.srtwo p:last-child{
border-bottom:dotted 1px #9b9b9b;
}
.srtwo>div{
position: absolute;
left:25px;
top:240px;
width: 211px;
height: 25px; 
background: url("image/master-btn.png")
}
.srtwo>div:hover {
background: url("image/master-btn-hover.png");
}
.srthree{
margin-top: 20px;
width: 254px;
height: 200px;
border: 1px rgba(0,0,0,.3) solid;
border-radius: 9px;
background: url("image/cooperation_bg.png")
}
.srthree>div{

margin-top: 50px;
width:235px;
margin:50px auto 0 auto;
overflow: hidden;
position: relative;
cursor: pointer;
}
.srthree>div>div:hover{
margin-left:0px;
transition: 0.8s;

}
.srthree>div>div{
margin-left: -87px;
transition: 0.8s;
}

.srthree div::after{
content: "";
display: block;
clear: both;
}
.srthree ul{
position: absolute;
top:0;
left: 90px;
cursor: pointer;
}
.srthree ul li{
width: 126px;
height: 30px;
margin-bottom: 7px;
text-align: center;
line-height: 30px;
color:#fff;
font-size: 15px;
background: url("image/cooperation_btn.png");
transition: 0.5s;
}
.srthree ul li:hover{
transition: 0.5s;
background: url("image/cooperation_btn.png") 0 -30px;
}
#footer{
    width:100%;
    height: 70px;
    position: relative;
    overflow: hidden; 
    margin-top: 10px;
}
#footer ul{
    width: calc(2220*2px);
    height: 100%;
    position: absolute;
}
#footer li{
    float: left;
}
